<template>
    <div class="app-sidebar" h-full
        :class="{ 'app-sidebar-fix-left': fixed == 'left', 'app-sidebar-fix-right': fixed == 'right' }">
        <div class="app-sidebar-body is-autoHide"
            :class="{ 'is-autoHide-left': fixed == 'left' && isHide == true, 'is-autoHide-right': fixed == 'right' && isHide == true }"
            w-full h-full>
            <div class="app-sidebar-avator" w-full>
                <img src="@/assets/images/avatar.png" alt="head" @click="handleOpenSet">
            </div>
            <div class="app-sidebar-group">
                <ul class="app-sidebar-group-ul">
                    <li class="app-sidebar-group-li flex-center" v-for="(item, index) in globalStore.sidebar.groupList"
                        @click="handleChangeTab(item, index)" :title="item.name" flex-col mt4 mb4 :key="item.id" :id="item.id"
                        :class="{ 'app-sidebar-group-li-selected': item.id == globalStore.sidebar.activeFlag }"
                        @contextmenu.stop.native="showGroupContextmenu">
                        <i class="iconfont app-sidebar-group-li-icon app-sidebar-icon" :id="item.id" :class="[`${item.icon}`]"></i>
                        <div class="app-sidebar-group-li-label" :id="item.id">{{ item.name }}</div>
                    </li>
                    <li class="app-sidebar-group-li flex-center" title="添加" @click="handleAdd">
                        <i class="iconfont app-sidebar-group-li-icon app-sidebar-icon icon-jiahao flex-center"
                            style="height: 5rem;"></i>
                    </li>
                </ul>
            </div>
            <div class="app-sidebar-reward flex-center" title="打赏">
                <i class="iconfont icon-recha app-sidebar-icon"></i>
            </div>
            <div class="app-sidebar-setting flex-center" title="设置" @click="handleOpenSet">
                <i class="iconfont icon-shezhi app-sidebar-icon"></i>
            </div>
        </div>
        <div class="app-sidebar-popover" v-show="showAdd">
            <div class="app-sidebar-popover-title" mb12>添加分组</div>
            <ul class="app-sidebar-popover-ul">
                <li v-for="item in iconList" class="flex-center" :class="{ 'icon-selected': item.id == selectIcon.id }"
                    :key="item.id" @click="handleSelectIcon(item)">
                    <i class="iconfont app-sidebar-icon" :class="[`${item.icon}`]"></i>
                </li>
            </ul>
            <p fs-14 mt4 mb4>名称</p>
            <el-input v-model="selectIcon.name" size="small" class="app-sidebar-popover-input"></el-input>
            <div class="app-sidebar-popover-btn" flex mt8>
                <el-button size="small" type="primary" @click="handleSave">保存</el-button>
                <el-button size="small" @click="handleCancel">取消</el-button>
            </div>
        </div>
        <ContextMenu ref="contextMenuRef" v-show="globalStore.contextmenuType == 'sidebar'">
            <template #li>
                <li class="d-contextmenu-item-app" @click="handleEdit">
                    <el-icon size="15" mr8>
                        <Edit />
                    </el-icon>
                    <p>编辑</p>
                </li>
                <li class="d-contextmenu-item-app" @click="handleDelete">
                    <el-icon size="15" mr8>
                        <Delete />
                    </el-icon>
                    <p>删除</p>
                </li>
            </template>
        </ContextMenu>
    </div>
</template>

<script setup lang="ts">
import { Edit, Delete } from '@element-plus/icons-vue'
import { GroupListType } from '@/store/interface/global'
import { useGlobalStore } from '@/store/module/global'
import { reactive, ref } from 'vue';
import ContextMenu from '@/components/main/components/contextMenu.vue';
import { useContextMenu } from '../modal';

const {
    contextMenuRef,
    showContextMenu,
    closeContextMenu
} = useContextMenu()

const selectIconId = ref('')
const showGroupContextmenu = (e:any) => {
    selectIconId.value = e.target.id
    globalStore.setContextmenuType('sidebar')
    showContextMenu(e)
}

const globalStore = useGlobalStore()

const fixed = computed(() => globalStore.sidebar.fixed)
const isHide = computed(() => globalStore.sidebar.isHide)
const showAdd = ref(false)
const iconList = [
    { id: '1', name: '主页', icon: 'icon-zhuye' },
    { id: '2', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '3', name: '主页', icon: 'icon-zhuye' },
    { id: '4', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '5', name: '主页', icon: 'icon-zhuye' },
    { id: '6', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '7', name: '主页', icon: 'icon-zhuye' },
    { id: '8', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '9', name: '主页', icon: 'icon-zhuye' },
    { id: '10', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '11', name: '主页', icon: 'icon-zhuye' },
    { id: '12', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id:'13', name: '主页', icon: 'icon-zhuye' },
    { id: '14', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '15', name: '主页', icon: 'icon-zhuye' },
    { id: '16', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '17', name: '主页', icon: 'icon-zhuye' },
    { id: '18', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '19', name: '主页', icon: 'icon-zhuye' },
    { id: '20', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '21', name: '主页', icon: 'icon-zhuye' },
    { id:'22', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '23', name: '主页', icon: 'icon-zhuye' },
    { id: '24', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '25', name: '主页', icon: 'icon-zhuye' },
    { id: '26', name: '设计', icon: 'icon-tubiao_shejikongjian' },
    { id: '27', name: '主页', icon: 'icon-zhuye' },
    { id: '28', name: '设计', icon: 'icon-tubiao_shejikongjian' },
]

const selectIcon = reactive<GroupListType>({
    id: iconList[0].id,
    name: iconList[0].name,
    icon: iconList[0].icon,
    appList:[]
})

const handleChangeTab = (item: GroupListType, index: number) => {
    globalStore.sidebar.activeFlag = item.id
    globalStore.sidebar.currentTab = index
}

const handleSelectIcon = (item: GroupListType) => {
    selectIcon.icon = item.icon
    selectIcon.id = item.id
    selectIcon.name = item.name
}

const handleAdd = () => {
    showAdd.value = true
}

const handleSave = () => {
    selectIconId.value ? globalStore.editSidebarGroup(Object.assign({}, selectIcon,{id:selectIconId.value})) : globalStore.addSidebarGroup(deepCopy(selectIcon))
    handleCancel()
}

const handleCancel = () => {
    showAdd.value = false
    selectIcon.id = iconList[0].id
    selectIcon.name = iconList[0].name
    selectIcon.icon = iconList[0].icon
    selectIconId.value = ''
}

const handleEdit = () => {
    showAdd.value = true
    const find = globalStore.sidebar.groupList.find(item => item.id == selectIconId.value)
    if(find){
        selectIcon.icon = find.icon
        selectIcon.name = find.name
        selectIcon.id = find.id
        selectIcon.appList = find.appList
    }
}

const handleDelete = () => {
    globalStore.removeSidebarGroup(selectIconId.value)
}

const handleOpenSet = () => {
    globalStore.updateSetDrawerVisible(true)
}
</script>

<style scoped lang="scss">
.app-sidebar {
    width: var(--sideBarWidth);
    position: fixed;
    top: 0;
    z-index: 3;

    &:hover {
        .is-autoHide {
            transform: translateX(0);
        }
    }

    &-fix-left {
        left: 0;
    }

    &-fix-right {
        right: 0;
    }

    .is-autoHide-left {
        transform: translateX(var(--sideBarTranslate));
    }

    .is-autoHide-right {
        transform: translateX(var(--sideBarWidth));
    }

    &-popover {
        font-size: $default-fontSize;
        position: fixed;
        top: 12rem;
        left: calc(var(--sideBarWidth) + 10px);
        width: 26rem;
        background-color: rgba($color-black, .8);
        padding: 12px;
        color: rgba($icon-color, .8);

        &-ul {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 5px;
            grid-auto-flow: dense;
            color: rgba($icon-color, .6);

            .icon-selected {
                background-color: #fff3;
                border-radius: 5px;
                color: $color-white;
            }
        }

        &-input {
            :deep(.el-input__wrapper) {
                background-color: rgba($icon-color, .1);
                border-radius: 8px;
                --el-input-text-color: white;
            }
        }
    }

    &-body {
        display: flex;
        justify-content: center;
        flex-direction: column;
        background-color: rgba($color-black, var(--sideBarOpacity));
        color: rgba($icon-color, .6);
        transition: all .2s;
    }

    &-avator {
        margin-top: 4rem;
        margin-bottom: 4rem;
        cursor: pointer;
        height: 3rem;

        img {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            margin: 0 auto;
        }
    }

    &-group {
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 0;
        }
    }

    &-setting {
        height: 5.6rem;

        .icon-shezhi {
            transition: all .3s;

            &:hover {
                transform: rotate(360deg);
            }
        }
    }

    &-icon {
        font-size: 2.2rem;
    }

    &-group-li {
        cursor: pointer;
        text-align: center;

        &-icon {
            transition: all .3s;

            &:hover {
                transform: scale(1.2);
            }
        }

        &-label {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: keep-all;
            width: 100%;
        }

        &-selected {
            background-color: #ffffff26;
        }
    }


}</style>